<!--
  @Description:个人中心首页
  @author Wangshu
  @date 2019/8/21
-->

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="__PUBLIC__/css/common/bootstrap.min.css">
    <link rel="stylesheet" href="__PUBLIC__/css/header.css">
    <link rel="stylesheet" href="__PUBLIC__/css/changeData.css">
    <link rel="stylesheet" href="__PUBLIC__/css/menu.css">
    <link rel="stylesheet" href="__PUBLIC__/css/common/common.css">
    <title>山东科技大学技术转移公共服务平台-个人中心</title>
</head>
<body>
<head>
    <div class="top-title">
        <div>
            <span>欢迎登陆山东科技大学技术转移公共服务平台！</span>
            <if condition="$uid eq null">
                <div class="login">
                    <img src="__PUBLIC__/asset/icon/people.png" alt="">
                    <a href="{:url('login/index')}">登录</a>
                    <span class="spece">|</span>
                    <a href="{:url('login/signup')}">注册</a>
                </div>
                <else/>
                <div class="login">
                    <img src="__PUBLIC__/asset/icon/people.png" alt="">
                    <a href="{:url('me/me')}">欢迎你！</a>
                    <a href="{:url('me/me')}">{$user.real_name}</a>
                </div>
            </if>
        </div>
    </div>
    <div class="logo-box">
        <div class="logo-wrap">
            <div>
                <img src="__PUBLIC__/asset/fodder/logo.png" alt="">
            </div>
            <div>
                <div class="search">
                    <div class="dropdown">
                        <div class="btn select-default dropdown-toggle" type="button" id="dropdownMenu1"
                             data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            请选择学院
                            <span><img style="width: 20px;" src="__PUBLIC__/asset/icon/dropdown.png" alt=""></span>
                        </div>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <foreach name="allColleges" item="vo">
                                <li><a onclick="shows1($(this).text(),{$vo.id})">{$vo.college_name}</a></li>
                            </foreach>
                        </ul>
                    </div>
                    <div class="search-block">
                        <input type="text" name="keyword" id="keyword">
                    </div>
                    <div class="submit" id="submit">
                        <img src="__PUBLIC__/asset/icon/search.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="nav-box">
        <div class="nav-list">
            <ul>
                <li><a href="{:url('/index/index')}">首页</a></li>
                <li><a href="{:url('news/index')}">新闻</a></li>
                <li><a href="{:url('people/index')}">人才库</a></li>
                <li><a href="{:url('fruit/index')}">成果库</a></li>
                <if condition="$user_type eq 0">
                    <li><a href="{:url('requirement/index')}">需求库</a></li>
                </if>
                <li class=""><a href="{:url('me/callme')}">联系我们</a></li>
            </ul>
        </div>
    </div>
</head>
<main>
    <div class="content-wrap">
        <div class="menu-left">
            <div class="title">个人中心</div>
            <ul>
                <li class="active">
                    <a href="./me.html">个人资料</a>
                    <img class="active-arrow" src="__PUBLIC__/asset/icon/right_arrow.png" alt="">
                </li>
                <if condition="$user_type eq 0">
                    <li><a href="./fruit.html">我发布的成果</a><img src="__PUBLIC__/asset/icon/right_arrow.png" alt=""></li>
                </if>
                <li><a href="./requirement.html">我发布的需求</a><img src="__PUBLIC__/asset/icon/right_arrow.png" alt=""></li>
                <if condition="$user_type eq 0">

                    <li>
                        <a href="./team.html">我的团队</a>
                        <img src="__PUBLIC__/asset/icon/right_arrow.png" alt="">
                    </li>
                </if>
                <li><a href="./collection.html">我的收藏</a><img src="__PUBLIC__/asset/icon/right_arrow.png" alt="">
                </li>
                <li><a href="./FAQ.html">常见问题</a><img src="__PUBLIC__/asset/icon/right_arrow.png" alt=""></li>
                <li><a href="./callMe.html">联系客服</a><img src="__PUBLIC__/asset/icon/right_arrow.png" alt=""></li>
                <li><a href="./other.html">其他设置</a><img src="__PUBLIC__/asset/icon/right_arrow.png" alt=""></li>
            </ul>
        </div>
        <div class="menu-right">
            <div class="title">
                <div>个人资料</div>
                <div>当前位置：<span>个人中心/个人资料/修改</span></div>
            </div>
            <div class="content">
                <div class="option">
                    <div>头像：</div>
                    <div class="img-box"><input id="imageInput" class="imageinput" style="display: none;" type="file"
                                                accept="image/jpeg,image/jpg,image/png"/>
                        <if condition="$teacher.head_img neq null">
                            <img class="imageView" src="{$teacher.head_img}" alt=""
                                 onclick="selectImage()">
                            <else/>
                            <img class="imageView" src="__PUBLIC__/asset/fodder/header.png" alt=""
                                 onclick="selectImage()">
                        </if>
                    </div>

                </div>
                <div class="option">
                    <div>姓名：</div>
                    <div class="text-box"><input id="name" type="text" placeholder="请输入姓名" value="{$teacher.real_name}">
                    </div>
                </div>

                <div class="option">
                    <div>工号：</div>
                    <div class="number-box">{$teacher.teacher_no}</div>
                </div>

                <div class="option">
                    <div>联系方式：</div>
                    <div class="text-box"><input id="phone" type="text" placeholder="请输入联系方式" value="{$teacher.phone}">
                    </div>
                </div>
                <div class="option">
                    <div>学院：</div>
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <span id="college">{$teacher.college_detail.college_name|default="请选择学院"}</span>
                            <span><img style="width: 20px;" src="__PUBLIC__/asset/icon/dropdown.png" alt=""></span>
                        </button>
                        <input type="hidden" id="selectedCollege" value="{$teacher.college}"/>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <foreach name="colleges" item="vo">
                                <li><a onclick="selectCollege($(this).text(),{$vo.id})">{$vo.college_name}</a></li>
                            </foreach>
                        </ul>
                    </div>
                </div>
                <div class="option">
                    <div>专业：</div>
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <span id="specialty">{$teacher.specialty_detail.specialty_name|default="请选择专业"}</span>
                            <span><img style="width: 20px;" src="__PUBLIC__/asset/icon/dropdown.png" alt=""></span>
                        </button>
                        <input type="hidden" id="selectedSpecialty" value="{$teacher.specialty}"/>
                        <ul id="specialtyList" class="dropdown-menu" aria-labelledby="dropdownMenu1">

                            <foreach name="specialties" item="vo">
                                <li><a onclick="selectSpecialty($(this).text(),{$vo.id})">{$vo.specialty_name}</a></li>
                            </foreach>
                        </ul>
                    </div>
                </div>
                <div class="option add">
                    <div>标签：</div>
                    <div class="text-box new-tag"><input id="newTag" type="text" placeholder="新建标签"></div>
                    <img id="addTag" onclick="addNewTag()" src="__PUBLIC__/asset/icon/add.png" alt="">
                </div>
                <div class="option tag-wrap">
                    <div>自主标签：</div>
                    <div class="tag-box">
                        <ul id="tagList">
                            <foreach name="tagList" item="vo">
                                <li data="{$vo.tag}" onclick="addTag('{$vo.id}','{$vo.tag}')"
                                <in name="vo.tag" value="$teacher['tag_text']">class="active"</in>
                                >{$vo.tag}</li>
                            </foreach>
                        </ul>
                    </div>
                </div>
                <div class="option intro-wrap">
                    <div>个人简介：</div>
                    <div class="intro-box">
                        <!--<textarea name="content" id="content" cols="60" rows="7" placeholder="请输入个人简介">{$teacher.resume}</textarea>-->
                        <script id="container" name="content" type="text/plain">
                        {$teacher.resume|raw}
                        </script>
                    </div>
                </div>
                <div class="save">
                    <div id="save">保存</div>
                    <div id="update">更新到人才库</div>
                </div>
            </div>

        </div>
    </div>
</main>
<footer>
    <div class="foot-line">
        <span>青岛校区地址：山东省青岛市黄岛区前湾港路579号</span>
        <span>邮政编码：266590</span>
        <span>联系电话：0532-80698028\80698027\80678029</span>
        <span>传真：0532-80698029</span>
    </div>
    <div class="foot-line">
        <span>泰安校区地址：山东省泰安市岱宗大街223号</span>
        <span>邮政编码：271019</span>
        <span>联系电话：0538-3076489</span>
        <span>传真：0538-3076489</span>
    </div>
    <div class="last-line">
        Copyright©2019 　山东科技大学 　鲁ICP备09051012号
        <span style="line-height: 26px ; margin-left: 20px;"><img
                style="width: 44px;height: 17px; margin-right: 10px;vertical-align: middle"
                src="__PUBLIC__/asset/fodder/todo_white.png" alt=""><span
                style="vertical-align: middle">投道科技提供技术支持</span></span>
    </div>
</footer>
<div class="pop-box">
    <div class="pop">
        <img class="close" src="__PUBLIC__/asset/icon/close.png" alt="">
        <div class="logo"><img src="__PUBLIC__/asset/icon/success.png" alt=""></div>
        <p id="popText">您的个人资料保存成功</p>
        <div class="affirm">
            <div id="affirmBtn">确定</div>
        </div>
    </div>
</div>
<script src="__PUBLIC__/js/public/jquery-1.11.3.min.js"></script>
<script src="__PUBLIC__/js/public/bootstrap.min.js"></script>
<script src="__PUBLIC__/js/layer/layer/layer.js"></script>

<!-- 配置文件 -->
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container', {
        toolbars: [
            [
                'undo', //撤销
                'bold', //加粗
                'underline', //下划线
                'preview', //预览
                'horizontal', //分隔线
                'inserttitle', //插入标题
                'cleardoc', //清空文档
                'fontfamily', //字体
                'fontsize', //字号
                'paragraph', //段落格式
                'simpleupload', //单图上传
                'insertimage', //多图上传
                'attachment', //附件
                'music', //音乐
                'inserttable', //插入表格
                'emotion', //表情
                'insertvideo', //视频
                'justifyleft', //居左对齐
                'justifyright', //居右对齐
                'justifycenter', //居中对
                'justifyjustify', //两端对齐
                'forecolor', //字体颜色
                'fullscreen', //全屏
                'edittip ', //编辑提示
                'customstyle', //自定义标题
                'template', //模板
            ]
        ]
    });
</script>
<script>
    var tagNames = "{$teacher.tag_text}" === "" ? [] : "{$teacher.tag_text}".split(",");
    $('#save').on('click', function () {

        var image = $(".imageView").attr('src')
        var name = $("#name").val();
        var phone = $("#phone").val()
        var college = $("#selectedCollege").val()
        var specialty = $("#selectedSpecialty").val()
        var tag_text = tagNames.join(',')
        var content = UE.getEditor('container').getContent()
        const data = {
            image,
            real_name: name,
            phone,
            college,
            specialty,
            tag_text,
            resume: content
        }
        console.log(data)
        $.post("{:url('me/saveTeacher')}", data, function (res) {
            if (res.code == 0) {
                layer.msg(res.msg, {icon: 1}, function () {
                    window.location.reload()

                    return false;
                });
            } else {
                layer.msg(res.msg, {icon: 1}, function () {
                    window.location.reload()
                    return false;
                });
            }
        });
    });

    $('#update').on('click', function () {
        $.post('update', {}, function (res) {
            if (res.code === 0) {
                return layer.msg(res.msg)
            } else {
                $('.pop-box').css('display', 'block')
                $('#popText').text('您在人才库更新成功！')
            }
        })

    })

    $('#affirmBtn').on('click', function () {
        $('.pop-box').css('display', 'none')
    })

    $('.close').click(function () {
        $('.pop-box').css('display', 'none')
    })

    $('.dropdown-toggle').dropdown()

    var selectedCollege = null;

    function shows1(a, id) {
        selectedCollege = {id, college: a};
        $("#dropdownMenu1").text(a);
    }

    function shows2(a) {
        $("#dropdownMenu2").text(a);
    }

    function selectCollege(name, id) {
        $("#college").text(name)
        $("#selectedCollege").val(id)

        $.post("{:url('me/getSpecialties')}", {'college_id': id}, function (res) {
            if (res.code == 1) {
                layer.msg(res.msg, {icon: 1}, function () {
                    return false;
                });
            } else {
                $("#specialtyList").empty();
                const data = res.data;
                data && data.map(spec => {
                    $("#specialtyList").append(`<li><a onclick="selectSpecialty($(this).text(),${spec.id})">${spec.specialty_name}</a></li>`);
                })

                if (data && data.length > 0) {
                    $("#selectedSpecialty").val(data[0].id)
                    $("#specialty").text(data[0].specialty_name)
                } else {
                    $("#selectedSpecialty").val(null)
                    $("#specialty").text("请选择专业")
                }
            }
        });

        console.log(id)

    }

    function selectSpecialty(name, id) {
        $("#specialty").text(name)
        $("#selectedSpecialty").val(id)
        console.log(id)
    }

    $(".tag-box ul li").click(function () {
        let status = $(this).hasClass("active")
        var index = tagNames.indexOf(`${$(this).context.innerText}`);
        if (status === false) {
            console.log($(this).context.innerText)
            if (tagNames.length >= 5 && index < 0) {
                layer.msg("最多添加5个标签", {icon: 2}, function () {
                    return false;
                });
            } else {
                $(this).addClass('active')
                tagNames.push($(this).context.innerText)
            }
        } else {
            $(this).removeClass('active')
            tagNames.splice(index, 1)
        }

        console.log(tagNames)
    });
    $(".imageinput").change(function () {
        didLoadImage(this);
    });

    function addTag(id, tag) {
        // var index = tagNames.indexOf(tag);
        // console.log(tagNames.length)
        // if (tagNames.length >= 5 && index < 0){
        //     layer.msg("最多添加5个标签", {icon: 2}, function () {
        //         return false;
        //     });
        //     return false;
        // }else {
        //     if (index > -1) {
        //         tagNames.splice(index, 1)
        //     } else {
        //         tagNames.push(tag)
        //     }
        // }
        // console.log( 1111111,tagNames)
    }

    function addNewTag() {
        if (tagNames.length >= 5) {
            layer.msg("最多添加5个标签", {icon: 2}, function () {
                return false;
            });
        } else {
            const tag = $("#newTag").val();
            if (!!tag) {
                $.post("{:url('me/addTag')}", {'newTag': tag}, function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg, {
                            time: 1500,
                        });
                    } else {
                        let newTag = res.data;
                        const html = `<li onclick="addTag(${res.data.id},${res.data.tag})"class="active">${res.data.tag}</li>`
                        $("#tagList").append(html)
                        tagNames.push(`${res.data.tag}`)
                    }
                });
            }
        }
    }

    function selectImage() {
        $("#imageInput").click();
    }

    function didLoadImage(x) {
        //取出选择的图片
        var fileInput = x.files[0];
        //判断是否选择了图片
        if (x.files && x.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                //此处得到是图片的base64编码数据
                imagUrl = e.target.result;
                console.log(e);
                $(".imageView").attr('src', imagUrl);
                //展示哪个样式
                if (imagUrl) {
                    $('.showImage').css('display', 'inline-flex');
                    $(".input_ImageItem").css('display', 'none');
                } else {
                    $(".upLoadText").css('display', 'inline-flex');
                    $(".imageView").css('display', 'none');
                }
            };
            reader.readAsDataURL(x.files[0]);
        }
    }


    $("#submit").on('click', function () {
        var name = $("#keyword").val();
        if (!selectedCollege) {
            window.open("{:url('people/index')}?keyword=" + name)
        } else {
            window.open("{:url('people/index')}?college_id=" + selectedCollege.id + "&keyword=" + name)
        }
    })

</script>
</body>
</html>

